<template>
  <div class="slideshow">
    <el-carousel :interval="5000" arrow="always" height="91.5vh">
      <el-carousel-item v-for="(item, index) in image" :key="index">
        <div class="image-container" :style="{ backgroundImage: `url('${item.image}')` }" @click="Link(index)">
          <el-row class="tanchu">
            <el-col :span="8">
              <div class="grid-content">
                <div class="text">
                  <h1>公司名称</h1>
                  <h4>{{ item.name }}</h4>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div class="text">
                  <h1>联系电话</h1>
                  <h4>{{ item.contactPhone }}</h4>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content" style="border-right: none;">
                <div class="text">
                  <h1>广告类型</h1>
                  <h4>
                    <dict-tag :options="dict.type.village_advertisements_type" :value="parseInt(item.type)"/>
                  </h4>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { listAdvertisements } from '@/api/village/advertisements'
import { listHomePage } from '@/api/village/HomePage'

export default {
  name: 'HomePage',
  dicts: ['village_activity_status', 'village_advertisements_type'],
  data() {
    return {
      CarouselData: '',
      options: [],
      image: [],
      height: '80vh',
      opacity: 1,
      banner: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    Link(index) {
      window.open(this.CarouselData[index].officialWebsite, '_blank')
    },
    getList() {
      listHomePage().then(response => {
        this.CarouselData = response.rows
        const nowImage = response.rows.map(item => {
          if (item.contentImageUrl !== null) {
            return {
              image: process.env.VUE_APP_BASE_API + item.contentImageUrl,
              contactPhone: item.contactPhone,
              type: item.type,
              name: item.enterpriseId
            }
          } else {
            return null
          }
        })
        this.image = nowImage.filter(item => item !== null)
        if (this.image.length > 0) {
          this.banner = true
        } else {
          this.banner = false
        }
      })
    },
    shortcut(e) {
      if (e == '广告投放') {
        this.$router.push({ path: '/advertisements' })
      }
      if (e == '活动意向') {
        this.$router.push({ path: '/intention' })
      }
      if (e == '会务列表') {
        this.$router.push({ path: '/meetings' })
      }
      if (e == '活动管理') {
        this.$router.push({ path: '/enterprises' })
      }
    }
  }
}

</script>

<style  lang="scss">
/* 禁止复制功能 */
* {
  -webkit-user-select: none;
  /* Chrome, Safari, Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  user-select: none;
  /* Standard syntax */
}

.title_box {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-self: center;
}

.title_img {
  width: 100%;
  object-fit: cover;

}

.slideshow {
  width: 100%;
  height: calc(100vh - 83.99px);
  z-index: 1000;
}

.image-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.tanchu {
  position: absolute;
  right: 0;
  bottom: 10px;
  z-index: 999;
  width: 100%;
  overflow: hidden;
  transition: all 2.3s ease 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-auto-columns: 1fr 1fr 1fr;
}

.grid-content {

  flex: 1;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(16.5px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
  -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
  text-align: center;
  border-right: 1px solid #000;
}

.todoapp {
  background: #fff;
  margin: 130px 0 40px 0;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.footer {
  color: #777;
  padding: 10px 15px;
  height: 13vh;
  width: 100%;
  text-align: center;
  border-top: 1px solid #e6e6e6;
  display: flex;
}

.footer:before {
  content: '';
  height: 50px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
  0 8px 0 -3px #f6f6f6,
  0 9px 1px -3px rgba(0, 0, 0, 0.2),
  0 16px 0 -6px #f6f6f6,
  0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.footer img {
  flex: 1;
  width: 110px;
  height: 90px;
  object-fit: cover;
  object-position: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.footer .text {
  flex: 5;
  display: flex;
  flex-direction: column;

  .top {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
  }

  .bottom {
    flex: 1;
  }
}

.el-carousel__arrow {
  height: 200px;
  width: 50px;
  border-radius: 10px;
  background-color: rgba(43, 43, 43, 0.29) !important;
  transition: 300ms;
}

.el-carousel__arrow--left{
  left: 0;
  transition: 300ms;
}
.el-carousel__arrow--left:hover{
  background-color: rgba(43, 43, 43, 0.57) !important;
  transition: 300ms;
}

</style>
